<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:09:35
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-04 10:24:40
 * @FilePath: home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="home">
    <div class="top">
      <div class="address">
        <van-icon name="location-o" />{{ locationInfo.district || "长兴县" }}
      </div>
      <div class="search" @click="goSearch">
        <van-icon name="search" color="#bfbfbf" class="search-icon" />
        <span class="placeholder">汽车保养</span>
      </div>
      <van-badge :dot="hasMessage">
        <van-image
          width="100%"
          height="100%"
          class="chat"
          :src="require('@/assets/icon/common/chat.png')"
          @click="goMessage"
        ></van-image>
      </van-badge>
    </div>
    <div
      class="car"
      :style="{
        background: hasCar
          ? '#fff'
          : 'linear-gradient(to right, #0163eb, #00bffa)',
      }"
    >
      <van-image
        class="icon"
        fit="contain"
        :src="`${
          hasCar
            ? require('@/assets/icon/home/hasCaricon.png')
            : require('@/assets/icon/home/icon.png')
        }`"
      />
      <div v-if="!hasCar" class="nocar">
        <div
          v-for="(v, i) in nocarList"
          :key="JSON.stringify(v) + i"
          class="nocar_item"
          :class="{ margin_right: i == 1 }"
        >
          <van-image
            class="nocar_icon"
            :src="require('@/assets/icon/home/dui.png')"
            style="margin-right: 15px"
          />
          {{ v }}
        </div>
        <div class="add_car" @click="goToAddCar">+<span>添加爱车</span></div>
      </div>
      <div v-if="hasCar" class="hascar">
        <div class="car_info">
          <div class="flex_1">
            <div class="car_name">{{ carInfo.brand }}<span>▼</span></div>
            <div class="number_plate">
              <div
                class="number_1"
                :style="{
                  'background-color':
                    carInfo.plateNumber.length == 8 ? '#56d3a1' : '#406dfc',
                }"
              >
                {{ carInfo.plateNumber.substr(0, 2) }}
              </div>
              <div class="number_2">
                {{
                  carInfo.plateNumber.substr(
                    2,
                    carInfo.plateNumber.trim().length
                  )
                }}
              </div>
            </div>
          </div>
          <div class="flex_2">
            <van-image
              class="yibiaopan"
              :src="require('@/assets/icon/home/yibiaopan.png')"
            />
            <span class="meter">{{ carInfo.mileage || 0 }}</span
            >KM
            <!-- <van-icon name="edit" class="edit" style="margin-left: 10px" /> -->
          </div>
        </div>
        <van-image
          class="car_icon"
          :src="require('@/assets/icon/home/car.png')"
        />
      </div>
    </div>
    <div class="options">
      <van-grid :column-num="4" square>
        <van-grid-item
          v-for="(v, i) in options"
          :key="JSON.stringify(v) + i"
          @click="jump(v)"
        >
          <template #text>
            <span class="options_text">
              {{ v.name }}
            </span>
          </template>
          <template #icon>
            <div class="options_icon">
              <van-image width="100%" height="100%" fit="cover" :src="v.url" />
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="box">
      <div class="box_item_1" @click="chat"></div>
      <div class="box_item_2" @click="goWeiquan"></div>
    </div>
    <div v-if="smallBannerList.length || largeBannerList.length" class="h5">
      <van-grid :border="false" :column-num="3">
        <van-grid-item
          v-for="(v, i) in smallBannerList"
          :key="i"
          @click="link(v)"
        >
          <van-image :src="v.picUrl" radius="10" height="100%" />
        </van-grid-item>
      </van-grid>
      <van-swipe
        :style="{
          'margin-top':
            largeBannerList.length > 0 && smallBannerList.length
              ? '10px'
              : 'unset',
        }"
        autoplay="2000"
        loop
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="(v, i) in largeBannerList"
          :key="i"
          @click="link(v)"
        >
          <van-image width="100%" :src="v.picUrl" radius="8" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="flex">
          <homeListItem
            v-for="(v, i) in list"
            :type="1"
            :key="JSON.stringify(v) + i"
            :item="v"
            @click.native="goDetail(v)"
          >
          </homeListItem>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import homeListItem from "@/components/homeListItem.vue";
import { isZxcxAPP, zxcxPushToNotiAction } from "@/utils/zxcxWebkits";
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "home",
  components: { homeListItem },
  data() {
    //这里存放数据
    return {
      nocarList: ["平台监管", "透明修车", "安心服务"],
      options: [],
      hasCar: false,
      carInfo: {},
      isD: false,
      list: [],
      loading: false,
      finished: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      systemList: [],
      largeBannerList: [],
      smallBannerList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["carList", "locationInfo", "currentCarIndex"]),
    hasMessage() {
      return this.systemList.filter((item) => item.status == 0).length > 0;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.getHomeGoods();
    },
    goToAddCar() {
      this.$router.push({
        path: "/addCar",
      });
    },
    goLocation() {
      this.$router.push({
        path: "/location",
      });
    },
    goSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    goWeiquan() {
      this.$router.push({
        path: "/addWeiquan",
      });
    },
    chat() {
      this.$router.push({
        path: "/chat",
      });
    },
    goMessage() {
      this.$router.push({
        path: "/systemMessage",
      });
    },
    goDetail(v) {
      this.$router.push({
        path: "/serveDetail",
        query: {
          goodsId: v.id,
        },
      });
    },
    jump(item) {
      this.$router.push({
        path: "/baoyang",
        query: {
          id: item.id,
        },
      });
    },
    init() {
      this.getHomeCategory();
      this.getSystemMessageList();
      this.getBannerList();
    },
    async getHomeCategory() {
      let params = {
        isTop: "true",
        type: 0,
        keyWords: "",
        parentId: "",
      };
      let res = await api.gethomeCategory(params);
      this.options = res.filter((v, i) => i < 4);
    },
    getHomeGoods() {
      let params = {
        ...this.pageInfo,
      };
      api
        .getHomeGoods(params)
        .then((res) => {
          if (res.data.length == 0) {
            this.finished = true;
          }
          this.list = [...this.list, ...res.data].filter(
            (v) => v.id != "1952191044194463746"
          );
          if (res.data.length < this.pageInfo.pageSize) {
            this.finished = true;
          } else {
            this.pageInfo.pageNum++;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async getSystemMessageList() {
      let res = await api.systemLog({
        pageNum: 1,
        pageSize: 100,
      });
      this.systemList = [...this.systemList, ...res.data];
    },
    async getBannerList() {
      this.largeBannerList = await api.getHomeBannerList({
        positionType: 1,
      });
      this.smallBannerList = await api.getHomeBannerList({
        positionType: 2,
      });
    },
    link(v) {
      switch (v.type) {
        case 0:
          //无事件
          return;
        case 1:
          //商品详情
          this.$router.push({
            path: "/serveDetail",
            query: {
              goodsId: v.keyId,
            },
          });
          break;
        case 2:
          //外链
          window.location.href = `${v.url}`;
          break;

        case 3:
          //商品种类
          break;

        case 4:
          //爆品活动
          this.$router.push({
            path: "/hotActive",
            query: {
              id: v.keyId,
            },
          });
          break;

        case 5:
          //直播
          break;

        case 6:
          //新闻
          if (isZxcxAPP()) {
            zxcxPushToNotiAction({
              contentType: 1,
              contentTypeId: v.keyId,
            });
          }
          break;

        case 7:
          //帖子
          if (isZxcxAPP()) {
            zxcxPushToNotiAction({
              contentType: 12,
              contentTypeId: v.keyId,
            });
          }
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    if (this.carList.length) {
      this.hasCar = true;
      this.carInfo = this.carList[this.currentCarIndex];
    }
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 130px 50px 180px 50px;
  position: relative;

  .top {
    position: fixed;
    padding: 30px 50px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #deeff1;
    z-index: 999;

    .address {
      font-size: 44px;
    }

    .search {
      width: 850px;
      height: 0.75rem;
      background: #fff;
      border-radius: 999px;
      padding: 20px 0 20px 40px;
      display: flex;
      align-items: center;

      .search-icon {
        font-size: 44px;
      }

      .placeholder {
        color: #bfbfbf;
        font-size: 44px;
        margin-left: 10px;
      }
    }

    /deep/ .van-badge__wrapper {
      height: 78px;
      width: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat {
      width: 78px !important;
      height: 78px !important;
    }
  }

  .car {
    margin-top: 40px;
    width: 100%;
    height: 240px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 25px 104px 25px 65px;

    .icon {
      max-width: 122px;
      min-height: 122px;
      min-width: 122px;
      // min-height: 190px;
    }

    .nocar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-left: 108px;

      &_icon {
        width: 66px;
      }

      &_item {
        min-width: 277px;
        height: 70px;
        font-size: 44px;
        margin-bottom: 20px;
        color: #dee6ff;
        display: flex;
        align-items: center;
      }

      .margin_right {
        margin-right: 50px;
      }

      .add_car {
        width: 370px;
        height: 100px;
        background: #fff;
        border-radius: 999px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #179cf4;
        font-size: 44px;
        font-weight: bold;
      }
    }

    .hascar {
      display: flex;
      margin-left: 108px;

      // align-items: center;
      .car_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        width: 625px;

        .flex_1,
        .flex_2 {
          display: flex;
          align-items: center;
        }

        .flex_1 {
          font-size: 54px;

          span {
            font-size: 44px;
          }

          .car_name {
            font-size: 54px;
          }

          .number_plate {
            display: flex;
            align-items: center;
            height: 53px;
            width: 230px;
            font-size: 35px;
            margin-left: 20px;

            .number_1 {
              width: 40%;
              height: 100%;
              letter-spacing: 3px;
              text-align: center;
              color: #fff;
              line-height: 53px;
              border-top-left-radius: 10px;
              border-bottom-left-radius: 10px;
            }

            .number_2 {
              width: 60%;
              height: 100%;
              box-sizing: border-box;
              border-top: 3px solid #c0dbfb;
              border-right: 3px solid #c0dbfb;
              border-bottom: 3px solid #c0dbfb;
              text-align: center;
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
            }
          }
        }

        .flex_2 {
          margin-top: 15px;
          font-size: 44px;
          align-items: baseline;

          .meter {
            font-size: 38px;
            margin-left: 10px;
          }

          .yibiaopan {
            width: 54px;
            height: 42px;
          }

          .edit {
            font-size: 44px;
          }
        }
      }

      .car_icon {
        width: 217px;
        height: 159px;
      }
    }
  }

  .options {
    padding: 55px 0;

    &_text {
      font-size: 44px;
    }

    &_icon {
      min-width: 160px;
      max-width: 160px;
    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 223px;

    &_item_1 {
      background: url("@/assets/icon/home/btn_bg1.png") no-repeat;
      background-size: cover;
      height: 100%;
      width: 49%;
    }

    &_item_2 {
      background: url("@/assets/icon/home/btn_bg2.png") no-repeat;
      background-size: cover;
      height: 100%;
      width: 49%;
    }
  }

  .h5 {
    margin-top: 47px;
    width: 100%;
    // min-height: 555px;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #00c0fa, #015fea);
    /deep/ .van-swipe {
      aspect-ratio: 4;
      .van-image {
        height: 100%;
      }
    }
  }

  .list {
    width: 100%;
    margin-top: 30px;

    .flex {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
  }

  /deep/ .van-grid-item__content {
    background: transparent !important;
    padding: 0;
    margin: 0 15px;
  }
}
</style>
